import React, { useLayoutEffect } from "react";

//! 在渲染的内容更新到dom之前执行 类似于componentDidMount
// 可以避免闪烁的现象
const UseLayoutEffectDemo: React.FC = () => {
  const [count, setCount] = React.useState<number>(10);

  useLayoutEffect(() => {
    if (count === 0) {
      setCount(Math.random() + 200);
    }
  }, [count]);

  return (
    <div>
      数字:{count}
      <button
        onClick={() => {
          setCount(0);
        }}
      >
        修改数字0
      </button>
    </div>
  );
};

export default UseLayoutEffectDemo;
